<template>
	<view>
		<view class="arrivalNavigation" v-if="showHidden">
			<view class="d4"></view>
			<view class="sideNavigation">
				<view class="flex-xy-center" style="height: 80rpx;" v-for="(item,index) in btnList" :key="index"
					@click="btnClick(item)">
					<view class="liBottomBorder"></view>
					<view>{{ item.title }}</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/order-api.js';

	export default {
		name: '',
		data() {
			return {

				showPayCost: false,
				payCostList: [],
				currentPayItem: null,
				showPopCost: false,
				chargeItemsTypes: [{
						value: 1,
						text: '按次'
					},
					{
						value: 2,
						text: '按天'
					},
					// {
					// 	value: 3,
					// 	text: '按里程'
					// }
				],
				customCost: {
					chargeProjectName: '',
					chargeMoney: '',
					chargeItemsType: 1,
					canEdit: 3,
					number: '1',
					unitPrice: ''

				},
			}
		},
		props: {
			orderInfo: {
				type: Object,
				default () {
					return {}
				}
			},
			customerInfo: {
				type: Object,
				default () {
					return {}
				}
			},
			showHidden: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			btnList() {
				console.log('------', this.orderInfo);
				const orderStatus = this.orderInfo.orderStatus;
				const isCheckCar = this.orderInfo.isCheckCar;
				var btnList = [];
				if ((this.orderInfo.headName == null || this.orderInfo.salesman == null||this.orderInfo.vehicleCollectorName == null)&&this.checkPermi(['order:otaOrder:salesman'])) {
					btnList.push({
						title: '订单分配',
						code: 1,
						path: 'staffAllocation'
					})
				}
				
				if (this.checkPermi(['order:otaOrder:dispatchCar'])) {
					btnList.push({
						title: '订单排车',
						code: 2,
						path: 'carAllocation'
					})
				}
				
				if (isCheckCar == 1 && this.checkPermi(['order:otaOrder:takeCar'])) {
					btnList.push({
						title: '交车验车',
						code: 3,
						path: 'otaDeliveryAndInspection'
					})
				}
				
				if (isCheckCar == 2 && this.checkPermi(['order:otaOrder:returnCar'])) {
					btnList.push({
						title: '还车验车',
						code: 4,
						path: 'otaReturnTheCarForInspection'
					})
				}
				
				if ( (orderStatus == 4|| orderStatus == 9)  && this.checkPermi(['order:otaOrder:supplementaryPayment'])) {
					btnList.push({
						title: '费用补录',
						code: 999,
						path: 'otaSupplementaryPayment'

					})
				}
				
				return btnList;
			}
		},
		mounted() {

		},
		methods: {
			btnClick(btnInfo) {
				this.$emit('clickOpItem', btnInfo);

			},
		}

	}
</script>

<style lang="scss" scoped>
	.arrivalNavigation {
		width: 250rpx;
		position: fixed;
		top: 95rpx;
		right: 20rpx;
		z-index: 999;

		.sideNavigation {
			width: 248rpx;
			background-color: #202020;
			color: #eee;
			border-radius: 10rpx;

			li {
				height: 85rpx;
				text-align: center;
				line-height: 85rpx;
				font-size: 25rpx;
			}

			.liBottomBorder {
				border: 1rpx solid #373737;
			}

		}

		.d4 {
			// position: absolute;
			//  	left: 140rpx;
			width: 0;
			height: 0;
			margin-left: 150rpx;
			margin-top: -20rpx;
			border-width: 20rpx;
			border-style: solid;
			border-color: transparent #333 transparent transparent;
			transform: rotate(90deg);
			/*顺时针旋转90°*/

		}
	}

	.payCostItem {
		height: 80rpx;
		width: 600rpx;
		border-bottom: 1rpx solid #ededed;
	}

	.alertBtn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #1673FF;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}
</style>